<template>
  <div class="left-tree">
    <div class="tree-search">
      <template v-if="treeData.title">
        {{ treeData.title }}
      </template>
      <el-input
        v-else
        size="mini"
        @keyup.native.enter="getTree"
        v-model="treeName"
        placeholder="搜索"
      >
        <i
          slot="prefix"
          @click="getTree"
          class="el-input__icon el-icon-search"
        ></i>
      </el-input>
    </div>
    <div class="tree-lists">
      <div class="tree-btn" v-if="treeData.showBtn">
        <el-tag @click="addBtn()" type="primary" icon="el-icon-plus">{{
          treeData.btnText[0]
        }}</el-tag>
        <el-tag @click="addOther" icon="el-icon-edit">{{
          treeData.btnText[1]
        }}</el-tag>
      </div>
      <slot name="btn"></slot>
      <div
        :class="{ 'tree-ul': treeData.notree }"
        v-for="m in pageList"
        :key="m.id"
      >
        <p
          v-if="treeData.notree"
          :class="{ actived: searchData[treeData.searchKey] === m.id }"
          @click="searchChild(null, m)"
        >
          <el-tooltip
            v-if="m[treeData.nameKey].length > 22"
            class="item"
            effect="dark"
            :content="m[treeData.nameKey]"
          >
            <span>{{ m[treeData.nameKey] }}</span>
          </el-tooltip>
          <span v-else>{{ m[treeData.nameKey] }}</span>
        </p>
        <template v-if="!treeData.notree">
          <p class="tree-title" @click="showChild(m)">
            icon
            <el-tooltip
              v-if="m[treeData.nameKey].length > 22"
              class="item"
              effect="dark"
              :content="m[treeData.nameKey]"
            >
              <span>{{ m[treeData.nameKey] }}</span>
            </el-tooltip>
            <span v-else>{{ m[treeData.nameKey] }}</span>
            <el-button
              v-if="treeData.showTag"
              @click.stop="addBtn(m)"
              type="text"
              >编辑</el-button
            >
          </p>
          <div
            class="tree-ul"
            v-for="n in m[treeData.listKey]"
            :key="n.id"
            v-show="m.show"
          >
            <p
              @click="searchChild(m, n)"
              :class="{ actived: searchData[treeData.searchKey] === n.id }"
            >
              <el-tooltip
                v-if="n[treeData.nameKey].length > 22"
                class="item"
                effect="dark"
                :content="n[treeData.nameKey]"
              >
                <span>{{ n[treeData.nameKey] }}</span>
              </el-tooltip>
              <span v-else>{{ n[treeData.nameKey] }}</span>
              <el-button
                v-if="treeData.showTag"
                type="text"
                @click="deleteModel(n.id)"
                >删除</el-button
              >
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['searchData', 'treeData'],
  data() {
    return {
      treeName: '',
      showExport: false,
      pageList: [],
      options: [],
      parentData: {}
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    getTree() {
      let data = JSON.parse(JSON.stringify(this.options))
      data.forEach(item => {
        if (
          item[this.treeData.listKey].some(
            i => i[this.treeData.nameKey].indexOf(this.treeName) >= 0
          )
        ) {
          item[this.treeData.listKey] = item[this.treeData.listKey].filter(
            i => i[this.treeData.nameKey].indexOf(this.treeName) >= 0
          )
        } else {
          item[this.treeData.listKey] = []
        }
      })
      this.pageList = data
    },
    // 查询事件
    doSearch() {
      this.$http(this.treeData.url, this.searchData, 'get').then(res => {
        const data = this.treeData.jsonData
          ? Object.entries(res.data).map(i => {
              let d = {}
              d[this.treeData.nameKey] = i[0]
              d[this.treeData.listKey] = i[1]
              return { ...d, show: true }
            })
          : res.data.map(i => {
              return { ...i, show: true }
            })
        this.pageList = data
        this.options = data
        this.$emit('getData', res.data)
      })
    },
    addBtn(data) {
      this.$emit('addBtn', data)
    },
    addOther() {
      this.$emit('addOther')
    },
    showChild(m) {
      this.$set(m, 'show', !m.show)
    },
    searchChild(m, n) {
      if (this.searchData[this.treeData.searchKey] === n.id) return
      this.parentData = { ...m }
      this.searchData[this.treeData.searchKey] = n.id
      this.$emit('searchChild', this.searchData, n)
    },
    deleteModel(type) {
      this.$emit('deleteModel', type)
    }
  }
}
</script>
<style lang="scss">
.left-tree {
  .tree-search {
    padding: 10px;
  }
  
  .tree-btn {
    padding: 10px;
    margin: 0;
    
    .el-tag {
      width: 49%;
      text-align: center;
      float: left;
      cursor: pointer;
      
      &:first-child {
        margin-right: 2%;
      }
    }
  }
  
  svg {
    margin-right: 10px;
    color: #5ef3db;
  }
  
  p {
    color: #333333;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .tree-title {
    svg:first-child {
      color: #666;
    }
  }
  
  .tree-ul {
    p {
      padding-left: 40px;
      overflow: hidden;
    }
    
    .actived {
      background: rgba(225,250,246,1);
      border-left: 2px solid var(--color-primary);
    }
    
    .el-tag {
      float: right;
      margin-top: 10px;
      margin-right: 5px;
    }
  }
}
</style>
